<template>
	<gui-page ref="guipage" :isLoading="$store.state.isPageLoading">
		<view slot="gBody">
			<view class="top-img">
				<image src="../../static/login/login_bg.jpg" mode="widthFix"></image>
			</view>
			<form @submit="submit">
				<view class="form">
					<view class="form-box bgfff flex-dc radius10">
						<text class="title f48 gui-text-center" style="letter-spacing: 2rpx;text-shadow: 3px 2px 4px #999;">校园智能化用餐系统</text>
						<text class="options primary-color gui-bold f36">登录</text>
						<view class="item flex-ac-jb" :class="{'itemFocus':isFocus1}">
							<view class="left flex-ac">
								<view class="icons">
									<image src="../../static/login/my_client.png" mode="widthFix"></image>
								</view>
								<view class="input flex1">
									<input type="text"  v-model="formData.username" name="username" placeholder="手机号"
										placeholder-class="plStyle" @focus="isFocus1=true" @blur="isFocus1=false"/>
								</view>
							</view>
						</view>
						<view class="item flex-ac-jb" :class="{'itemFocus':isFocus2}">
							<view class="left flex-ac">
								<view class="icons">
									<image src="../../static/login/pwd.png" mode="widthFix"></image>
								</view>
								<input type="text" :password="isPwdLook?true:false" v-model="formData.password" name="password"
									placeholder="密码" placeholder-class="plStyle" @focus="isFocus2=true" @blur="isFocus2=false"/>
							</view>
							<view class="right" v-show="formData.password">
								<image @tap="lookPwd" :src="`../../static/login/${isPwdLook?'eyesClose.png':'eyesOpen.png'}`"
									mode="widthFix" class="icon"></image>
							</view>
						</view>
						<view class="item flex-ac-jb codeL" :class="{'itemFocus':isFocus3}">
							<view class="left flex-ac">
								<view class="icons">
									<image src="../../static/login/vcode.png" mode="widthFix"></image>
								</view>
								<view class="input flex1">
									<input type="text" v-model="formData.vcode" name="vcode" placeholder="验证码"
										placeholder-class="plStyle" @focus="isFocus3=true" @blur="isFocus3=false"/>
								</view>
							</view>
							<view class="right primary-color">
								<HevuTextSlidingVode ref="textCode" :contentHeight="40" @changeCode="verification"
									identifyCode='13fd' :isDot="false" :isLine="false" backgroundColor="#fff" isCodetypeNumber
									isInsideCode :fontSizeMin="20" :fontSizeMax="26" />
							</view>
						</view>
					</view>
					<button class="saveBtn radius10" formType="submit">
						登录
					</button>
				</view>
			</form>
		</view>
	</gui-page>
</template>

<script>
	var graceChecker = require("@/GraceUI5/js/checker.js");
	import HevuTextSlidingVode from '@/components/hevu-text-sliding-vode/hevu-text-sliding-vode.vue'
	export default {
		components: {
			HevuTextSlidingVode
		},
		data() {
			return {
				formData: {
					username: '', //cxk
					password: '', //123456
					vcode: '',
				},
				vcodeBack: '',
				isPwdLook: true,
				isFocus1:false,
				isFocus2:false,
				isFocus3:false,
			}
		},
		methods: {
			verification(e) {
				console.log(e);
				this.vcodeBack = e
			},
			lookPwd() {
				this.isPwdLook = !this.isPwdLook
			},
			submit: function(e) {
				//定义表单规则
				var rule = [{
						name: "username",
						checkType: "notnull",
						errorMsg: "请输入手机号码"
					},
					{
						name: "password",
						checkType: "notnull",
						errorMsg: "请输入密码"
					},
					{
						name: "vcode",
						checkType: "notnull",
						errorMsg: "请输入图形验证码"
					}

				];
				//进行表单验证 e.detail.value 内存放着表单数据
				var formData = e.detail.value;
				console.log(formData);
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					if (formData.vcode != this.vcodeBack) {
						this.$u.msg('图形验证码有误！')
						this.$refs.textCode.makeCode()
						return;
					}
					this.$http.post('/login', this.formData).then(res => {
						let result = res
						console.log('登录信息', result)
						// uni.setStorageSync('token', result.token)
						this.$store.commit('setToken', result.token)
						// token
						// uni.setStorageSync('refresh_token', result.refresh_token)
						this.$u.to('/pages/index/index', 'reLaunch')
					})
				} else {
					this.$u.msg(graceChecker.error)
				}

			},
		}
	}
</script>

<style lang="less">
	.top-img {
		image {
			width: 100%;
			height: auto;
		}
	}

	.form {
		position: relative;
		top: -50rpx;
		width: 640rpx;
		margin: 0 auto;
		.form-box{
			padding: 30rpx;
			box-sizing: border-box;
			.options{
				margin-top: 50rpx;
			}
			
			.item {
				border-bottom: 1px solid #EFF3F4;
				height: 130rpx;
				.left {
					.icons {
						width: 62rpx;
			
						image {
							width: 30rpx;
							height: auto;
							-webkit-filter: grayscale(100%);
							  -moz-filter: grayscale(100%);
							  -ms-filter: grayscale(100%);
							  -o-filter: grayscale(100%);   
							  filter: grayscale(100%);
							  filter: gray;
							  opacity: .6;
						}
					}
				}
				.right {
					.icon {
						width: 35rpx;
						-webkit-filter: grayscale(100%);
						  -moz-filter: grayscale(100%);
						  -ms-filter: grayscale(100%);
						  -o-filter: grayscale(100%);   
						  filter: grayscale(100%);
						  filter: gray;
						  opacity: .6;
					}
				}
			}
			.itemFocus{
				position: relative;
				&:before{
					content: "";
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					width: 100%;
					height: 2px;
					background: #44b360;
				}
			}
			.codeL {
				height: 126rpx;
			}
		}
		
	}

	.saveBtn {
		height: 90rpx;
		margin-top: 50rpx;
		box-shadow: 0 25px 15px -20px #44b260;
	}
</style>